import React,{useEffect,useState} from 'react';
import {Button, Card, Modal, notification,Tabs} from "antd";
import {MonacoEditorCodeComp} from "../../components/MonacoEditorCodeComp";
import {getMarkDown} from "../../api/FetchMarkDown";

const containerStyle = {
    marginLeft: '20px'
}

const contentStyle = {
    width: '100%',
    height: '80vh',
    margin: '0 auto',
    marginTop: '30px',
    overflowY: 'scroll',
    border:'1px solid #ccc',
    padding: '10px',
}

const headerStyle = {
    margin: '0 auto',
    width: '60vw',
    height: '50px'
}

export const IndexContent = function ({children,title,desc,codeDir,tags}) {

    console.log(codeDir)

    const [api, contextHolder] = notification.useNotification();

    const [items, setItems] = useState([]);

    const [showMessage, setShowMessage] = useState(false);


    const okBtn = ()=>{
        return (
            <>
                <Button type={'link'} danger onClick={()=>{api.destroy();setShowMessage(false)}}>关闭</Button>
            </>
        )
    }

    const show = ()=>{
        api.info({
            message: '描述',
            description:desc,
            key:`open${Date.now()}`,
            btn: okBtn,
        });
    }
    useEffect( () => {
        if(children){
            if (codeDir){
                const result =  async  ()=> {
                    return  await getMarkDown(codeDir)
                };
                result().then(res=>{
                    const items = [
                        {
                            key:'1',
                            children:children,
                            label:'实机演示',
                        },
                        {
                            key:'2',
                            children:<MonacoEditorCodeComp code={res} language={'markdown'}/>,
                            label:'markdown源码与预览',
                        }
                    ]
                    setItems(items);
                });
            }else {
                const items = [
                    {
                        key:'1',
                        children:children,
                        label:'实机演示',
                    }
                ]
                setItems(items);
            }
        }
    }, [children,codeDir]);


    return (
        <>
            {contextHolder}
            <div style={containerStyle}>
                <div style={headerStyle}>
                    <h2>
                        {title}
                        <Button type={'link'} style={{marginLeft:'20px'}} onClick={show}>描述</Button>

                    </h2>
                    <h3>
                        涉及到的：{tags}
                    </h3>

                </div>
                <div style={contentStyle}>
                    <Tabs items={items} defaultActiveKey={1} centered/>
                </div>
            </div>
        </>
    )

};